<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>原始地址数据概览 - 用户地址数据系统</title>
    <link rel="stylesheet" href="relation-styles.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <script src="frame-integration.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
    <style>
        .systems-overview {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px;
            margin-bottom: 30px;
        }
        
        .system-card {
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
            padding: 20px;
            transition: all 0.3s ease;
        }
        
        .system-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        }
        
        .system-card-header {
            display: flex;
            align-items: center;
            margin-bottom: 15px;
        }
        
        .system-icon {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 15px;
            font-size: 20px;
            color: white;
        }
        
        .construction-icon {
            background-color: #4caf50;
        }
        
        .heating-icon {
            background-color: #ff9800;
        }
        
        .gas-icon {
            background-color: #2196f3;
        }
        
        .system-title {
            font-size: 18px;
            font-weight: 500;
            color: #2c3e50;
        }
        
        .system-stats {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 10px;
            margin: 15px 0;
        }
        
        .stat-item {
            text-align: center;
            padding: 12px 8px;
            border-radius: 8px;
            background-color: #f8f9fa;
            transition: all 0.2s;
            min-height: 80px;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }
        
        .stat-value {
            font-size: 18px;
            font-weight: 600;
            color: #37474f;
            margin-bottom: 5px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        
        .stat-label {
            font-size: 12px;
            color: #78909c;
            white-space: normal;
            line-height: 1.3;
        }
        
        .sync-info {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px;
            background-color: #f8f9fa;
            border-radius: 6px;
            margin-top: 15px;
        }
        
        .last-sync {
            font-size: 13px;
            color: #7f8c8d;
        }
        
        .sync-time {
            font-weight: 500;
            color: #2c3e50;
        }
        
        .system-actions {
            display: flex;
            justify-content: space-between;
            margin-top: 15px;
        }
        
        .recent-updates {
            margin-top: 30px;
        }
        
        .recent-updates-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
        }
        
        .recent-updates-title {
            font-size: 18px;
            font-weight: 500;
            color: #2c3e50;
        }
        
        .sync-status {
            display: inline-flex;
            align-items: center;
            font-size: 13px;
            padding: 5px 10px;
            border-radius: 20px;
        }
        
        .status-synced {
            background-color: #e8f5e9;
            color: #4caf50;
        }
        
        .status-syncing {
            background-color: #e3f2fd;
            color: #2196f3;
        }
        
        .status-failed {
            background-color: #ffebee;
            color: #f44336;
        }
        
        .status-outdated {
            background-color: #fff8e1;
            color: #ff9800;
        }
        
        .system-badge {
            display: inline-block;
            padding: 2px 8px;
            border-radius: 4px;
            font-size: 12px;
            font-weight: 500;
        }
        
        .badge-construction {
            background-color: #e8f5e9;
            color: #4caf50;
        }
        
        .badge-heating {
            background-color: #fff8e1;
            color: #ff9800;
        }
        
        .badge-gas {
            background-color: #e3f2fd;
            color: #2196f3;
        }
        
        /* 添加表格美化样式 */
        .updates-table {
            width: 100%;
            border-collapse: separate;
            border-spacing: 0;
            margin-bottom: 20px;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        }

        .updates-table thead {
            background-color: #f8f9fa;
        }

        .updates-table th {
            padding: 15px 12px;
            text-align: left;
            font-weight: 500;
            color: #455a64;
            border-bottom: 2px solid #e0e0e0;
            white-space: nowrap;
            position: sticky;
            top: 0;
            background-color: #f8f9fa;
            z-index: 10;
        }

        .updates-table tbody tr {
            transition: all 0.2s;
        }

        .updates-table tbody tr:nth-child(even) {
            background-color: #f8f9fa;
        }

        .updates-table tbody tr:hover {
            background-color: #e3f2fd;
        }

        .updates-table td {
            padding: 14px 12px;
            border-bottom: 1px solid #eeeeee;
            color: #37474f;
            vertical-align: middle;
        }

        .updates-table .time-column {
            white-space: nowrap;
            color: #78909c;
            font-size: 0.9rem;
        }

        .updates-table .system-column {
            font-weight: 500;
        }

        .updates-table .status-column {
            white-space: nowrap;
        }

        .sync-status {
            display: inline-flex;
            align-items: center;
            font-size: 14px;
            font-weight: 500;
            padding: 4px 10px;
            border-radius: 15px;
        }

        .sync-status i {
            margin-right: 5px;
        }

        .status-success {
            background-color: rgba(76, 175, 80, 0.1);
            color: #2e7d32;
        }

        .status-outdated {
            background-color: rgba(255, 152, 0, 0.1);
            color: #ef6c00;
        }

        .status-failed {
            background-color: rgba(244, 67, 54, 0.1);
            color: #d32f2f;
        }
        
        /* 系统卡片改进 */
        .system-cards {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
            gap: 20px;
            margin-bottom: 30px;
        }

        .system-card {
            background-color: white;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
            padding: 0;
            overflow: hidden;
            transition: all 0.3s;
            width: 100%;
            display: flex;
            flex-direction: column;
        }

        .system-card:hover {
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
            transform: translateY(-3px);
        }

        .system-card-header {
            padding: 15px;
            border-bottom: 1px solid #f0f0f0;
            display: flex;
            align-items: center;
            gap: 10px;
            flex-wrap: wrap;
        }

        .system-info {
            flex: 1;
            min-width: 200px;
        }

        .update-count {
            background-color: #e3f2fd;
            color: #1976d2;
            padding: 3px 8px;
            border-radius: 12px;
            font-size: 12px;
            font-weight: 600;
        }

        @media (max-width: 575px) {
            .stat-grid {
                grid-template-columns: repeat(1, 1fr);
            }
            
            .system-card-header {
                flex-direction: column;
                align-items: flex-start;
            }
            
            .system-info {
                width: 100%;
            }
        }

        /* 系统卡片样式增强 */
        .system-card-body {
            padding: 15px;
            display: flex;
            flex-direction: column;
            flex: 1;
        }

        .stat-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 10px;
            margin-bottom: 20px;
        }

        .stat-item:hover {
            background-color: #e3f2fd;
            transform: translateY(-2px);
        }

        .system-card-actions {
            margin-top: 15px;
            padding: 0 0 10px 0;
            display: flex;
            justify-content: center;
        }

        .system-card-actions .btn {
            padding: 8px 16px;
            white-space: nowrap;
        }

        .system-meta {
            display: flex;
            align-items: center;
            gap: 15px;
            margin-top: 4px;
            font-size: 13px;
        }

        .update-time {
            color: #78909c;
        }

        .error-text {
            background-color: rgba(244, 67, 54, 0.1);
            color: #d32f2f;
        }

        .system-info h4 {
            margin: 0;
            font-size: 16px;
            font-weight: 600;
            color: #37474f;
        }

        /* 响应式调整 */
        @media (min-width: 1200px) {
            .system-cards {
                grid-template-columns: repeat(3, 1fr);
            }
            
            .stat-grid {
                grid-template-columns: repeat(4, 1fr);
            }
        }

        @media (min-width: 768px) and (max-width: 1199px) {
            .stat-grid {
                grid-template-columns: repeat(4, 1fr);
            }
            
            .stat-value {
                font-size: 16px;
            }
        }

        @media (min-width: 576px) and (max-width: 767px) {
            .stat-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        @media (max-width: 575px) {
            .stat-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 8px;
            }
            
            .stat-value {
                font-size: 16px;
            }
            
            .stat-item {
                min-height: 70px;
                padding: 8px 5px;
            }
        }

        /* 优化卡片阴影和过渡效果 */
        .system-card {
            box-shadow: 0 2px 8px rgba(0,0,0,0.08);
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }
        
        .system-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 8px 16px rgba(0,0,0,0.12);
        }

        /* 优化统计数字显示 */
        .stat-value {
            font-size: 24px;
            font-weight: 700;
            background: linear-gradient(45deg, #2c3e50, #3498db);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            margin-bottom: 8px;
        }

        /* 优化标签显示 */
        .stat-label {
            font-size: 14px;
            font-weight: 500;
            color: #546e7a;
        }

        /* 优化统计项样式 */
        .stat-item {
            background-color: #ffffff;
            border: 1px solid rgba(0,0,0,0.08);
            border-radius: 12px;
            padding: 15px 10px;
            transition: all 0.3s ease;
        }

        .stat-item:hover {
            background-color: #f8f9fa;
            border-color: rgba(0,0,0,0.12);
        }

        /* 优化按钮样式 */
        .btn {
            border-radius: 8px;
            padding: 10px 20px;
            font-weight: 500;
            transition: all 0.3s ease;
        }

        .btn-primary {
            background: linear-gradient(45deg, #2196f3, #1976d2);
            border: none;
            box-shadow: 0 2px 6px rgba(33,150,243,0.3);
        }

        .btn-primary:hover {
            background: linear-gradient(45deg, #1976d2, #1565c0);
            box-shadow: 0 4px 8px rgba(33,150,243,0.4);
        }

        .btn-default {
            border: 1px solid #e0e0e0;
            background: #ffffff;
        }

        .btn-default:hover {
            background: #f5f5f5;
            border-color: #bdbdbd;
        }

        /* 优化系统图标 */
        .system-icon {
            width: 56px;
            height: 56px;
            border-radius: 16px;
            font-size: 24px;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        }

        /* 优化更新时间显示 */
        .update-time {
            font-size: 14px;
            color: #78909c;
            padding: 4px 12px;
            background-color: rgba(0,0,0,0.04);
            border-radius: 20px;
        }

        /* 图表区域样式 */
        .charts-section {
            margin: 30px 0;
        }
        
        .charts-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 20px;
        }
        
        .chart-card {
            background: white;
            border-radius: 12px;
            box-shadow: 0 2px 12px rgba(0,0,0,0.08);
            padding: 20px;
        }
        
        .chart-card-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }
        
        .chart-card-header h3 {
            margin: 0;
            font-size: 16px;
            font-weight: 600;
            color: #37474f;
        }
        
        .chart-container {
            height: 300px;
            width: 100%;
        }
        
        .chart-select {
            padding: 6px 12px;
            border-radius: 6px;
            border: 1px solid #e0e0e0;
            background: white;
            font-size: 14px;
            color: #37474f;
            cursor: pointer;
        }
        
        .chart-select:hover {
            border-color: #2196f3;
        }
        
        @media (max-width: 992px) {
            .charts-grid {
                grid-template-columns: 1fr;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <div class="title-section">
                <h1>原始地址数据概览</h1>
            </div>
            <div class="buttons-group">
                <button id="syncAllBtn">
                </button>
            </div>
        </header>
        
        <!-- 系统概览卡片 -->
        <div class="system-cards">
            <!-- 住建局系统卡片 -->
            <div class="system-card">
                <div class="system-card-header" style="background-color: #e8f5e9; border-left: 4px solid #4caf50;">
                    <div class="system-icon" style="background-color: #4caf50;">
                        <i class="fas fa-building"></i>
                    </div>
                    <div class="system-info">
                        <h4>住建局地址数据</h4>
                        <div class="system-meta">
                            <span class="update-time">最后同步: 2025-03-14 14:30</span>
                        </div>
                    </div>
                </div>
                <div class="system-card-body">
                    <div class="stat-grid">
                        <div class="stat-item">
                            <div class="stat-value">15,642</div>
                            <div class="stat-label">总地址数</div>
                        </div>
                        <div class="stat-item">
                            <div class="stat-value">12,458</div>
                            <div class="stat-label">关联数</div>
                        </div>
                        <div class="stat-item">
                            <div class="stat-value">10,245</div>
                            <div class="stat-label">标准化数</div>
                        </div>
                        <div class="stat-item">
                            <div class="stat-value">2,939</div>
                            <div class="stat-label">待标准数</div>
                        </div>
                    </div>
                    <div class="system-card-actions">
                        <button class="btn btn-primary" onclick="navigateTo(`original-address-construction.html`, '住建局原始数据')">
                            <i class="fas fa-list"></i> 查看详情
                        </button>
                    
                    </div>
                </div>
            </div>
            
            <!-- 供热系统卡片 -->
            <div class="system-card">
                <div class="system-card-header" style="background-color: #fff8e1; border-left: 4px solid #ff9800;">
                    <div class="system-icon" style="background-color: #ff9800;">
                        <i class="fas fa-fire"></i>
                    </div>
                    <div class="system-info">
                        <h4>供热系统地址数据</h4>
                        <div class="system-meta">
                            <span class="update-time">最后同步: 2025-03-15 09:15</span>
                        </div>
                    </div>
                </div>
                <div class="system-card-body">
                    <div class="stat-grid">
                        <div class="stat-item">
                            <div class="stat-value">12,847</div>
                            <div class="stat-label">总地址数</div>
                        </div>
                        <div class="stat-item">
                            <div class="stat-value">9,635</div>
                            <div class="stat-label">关联数</div>
                        </div>
                        <div class="stat-item">
                            <div class="stat-value">8,247</div>
                            <div class="stat-label">标准化数</div>
                        </div>
                        <div class="stat-item">
                            <div class="stat-value">1,388</div>
                            <div class="stat-label">待标准数</div>
                        </div>
                    </div>
                    <div class="system-card-actions">
                        <button class="btn btn-primary" onclick="navigateTo('original-address-heating.html', '供热系统原始数据')">
                            <i class="fas fa-list"></i> 查看详情
                        </button>
                    </div>
                </div>
            </div>
            
            <!-- 燃气系统卡片 -->
            <div class="system-card">
                <div class="system-card-header" style="background-color: #e3f2fd; border-left: 4px solid #2196f3;">
                    <div class="system-icon" style="background-color: #2196f3;">
                        <i class="fas fa-burn"></i>
                    </div>
                    <div class="system-info">
                        <h4>燃气系统地址数据</h4>
                        <div class="system-meta">
                            <span class="update-time">最后同步: 2025-03-14 17:45</span>
                        </div>
                    </div>
                </div>
                <div class="system-card-body">
                    <div class="stat-grid">
                        <div class="stat-item">
                            <div class="stat-value">13,256</div>
                            <div class="stat-label">总地址数</div>
                        </div>
                        <div class="stat-item">
                            <div class="stat-value">10,604</div>
                            <div class="stat-label">关联数</div>
                        </div>
                        <div class="stat-item">
                            <div class="stat-value">9,279</div>
                            <div class="stat-label">标准化数</div>
                        </div>
                        <div class="stat-item">
                            <div class="stat-value">1,325</div>
                            <div class="stat-label">待标准数</div>
                        </div>
                    </div>
                    <div class="system-card-actions">
                        <button class="btn btn-primary" onclick="navigateTo('original-address-gas.html', '燃气系统原始数据')">
                            <i class="fas fa-list"></i> 查看详情
                        </button>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 统计图表区域 -->
        <div class="charts-section">
            <div class="charts-grid">
                <!-- 数据分布饼图 -->
                <div class="chart-card">
                    <div class="chart-card-header">
                        <h3>各系统数据分布</h3>
                        <div class="chart-actions">
                            <button class="btn btn-sm btn-default" onclick="refreshDistribution()">
                                <i class="fas fa-sync"></i>
                            </button>
                        </div>
                    </div>
                    <div id="distributionChart" class="chart-container"></div>
                </div>

                <!-- 标准化进度图 -->
                <div class="chart-card">
                    <div class="chart-card-header">
                        <h3>地址标准化进度</h3>
                    </div>
                    <div id="standardizationChart" class="chart-container"></div>
                </div>
            </div>
        </div>
        
        <!-- 同步中模态框 -->
        <div class="modal" id="syncingModal">
            <div class="modal-content">
                <div class="modal-header">
                    <h4>正在同步数据</h4>
                </div>
                <div class="modal-body">
                    <div class="loading-spinner">
                        <i class="fas fa-sync fa-spin"></i>
                    </div>
                    <p>正在从<span id="syncingSystem">选定系统</span>同步地址数据</p>
                    <p>请稍候，这可能需要几分钟时间...</p>
                    <div class="progress-bar">
                        <div class="progress-fill" id="syncProgress"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <script>
        // 页面加载完成后初始化
        document.addEventListener('DOMContentLoaded', function() {
            // 绑定同步所有系统按钮
            document.getElementById('syncAllBtn').addEventListener('click', function() {
                syncAllSystems();
            });
            
            // 初始化图表
            initDistributionChart();
            initStandardizationChart();
            
            // 绑定时间范围选择事件
            document.getElementById('trendTimeRange').addEventListener('change', function(e) {
                // 这里可以根据选择的时间范围更新趋势图数据
                // 实际项目中应该从后端获取对应时间范围的数据
                console.log('Selected time range:', e.target.value);
            });
        });
        
        // 同步单个系统
        function syncSystem(system) {
            // 显示系统名称
            let systemName = '';
            switch(system) {
                case 'construction':
                    systemName = '住建局系统';
                    break;
                case 'heating':
                    systemName = '供热系统';
                    break;
                case 'gas':
                    systemName = '燃气系统';
                    break;
                default:
                    systemName = '选定系统';
            }
            
            document.getElementById('syncingSystem').textContent = systemName;
            
            // 显示同步中模态框
            showModal('syncingModal');
            
            // 模拟同步进度
            let progress = 0;
            const progressBar = document.getElementById('syncProgress');
            
            const progressInterval = setInterval(function() {
                progress += 5;
                progressBar.style.width = progress + '%';
                
                if (progress >= 100) {
                    clearInterval(progressInterval);
                    
                    // 模拟同步完成后关闭模态框并刷新页面
                    setTimeout(function() {
                        closeModal('syncingModal');
                        
                        // 实际项目中，这里应该根据服务器返回的结果更新页面
                        // 这里仅作为示例，简单地刷新页面
                        // location.reload();
                        
                        // 更新系统卡片状态
                        updateSystemStatus(system, 'synced');
                    }, 500);
                }
            }, 200);
        }
        
        // 同步所有系统
        function syncAllSystems() {
            // 显示同步中模态框
            document.getElementById('syncingSystem').textContent = '所有系统';
            showModal('syncingModal');
            
            // 模拟同步进度
            let progress = 0;
            const progressBar = document.getElementById('syncProgress');
            
            const progressInterval = setInterval(function() {
                progress += 3;
                progressBar.style.width = progress + '%';
                
                if (progress >= 100) {
                    clearInterval(progressInterval);
                    
                    // 模拟同步完成后关闭模态框并刷新页面
                    setTimeout(function() {
                        closeModal('syncingModal');
                        
                        // 实际项目中，这里应该根据服务器返回的结果更新页面
                        // 这里仅作为示例，简单地更新所有系统状态
                        updateSystemStatus('construction', 'synced');
                        updateSystemStatus('heating', 'synced');
                        updateSystemStatus('gas', 'synced');
                    }, 500);
                }
            }, 100);
        }
        
        // 更新系统状态
        function updateSystemStatus(system, status) {
            // 查找对应系统卡片
            const cards = document.querySelectorAll('.system-card');
            let targetCard = null;
            
            if (system === 'construction') {
                targetCard = cards[0];
            } else if (system === 'heating') {
                targetCard = cards[1];
            } else if (system === 'gas') {
                targetCard = cards[2];
            }
            
            if (!targetCard) return;
            
            // 更新同步状态
            const statusElement = targetCard.querySelector('.sync-status');
            
            // 清除所有状态类
            statusElement.classList.remove('status-synced', 'status-syncing', 'status-failed', 'status-outdated');
            
            // 更新为新状态
            switch(status) {
                case 'synced':
                    statusElement.classList.add('status-synced');
                    statusElement.innerHTML = '<i class="fas fa-check-circle"></i> 已同步';
                    break;
                case 'syncing':
                    statusElement.classList.add('status-syncing');
                    statusElement.innerHTML = '<i class="fas fa-sync fa-spin"></i> 同步中';
                    break;
                case 'failed':
                    statusElement.classList.add('status-failed');
                    statusElement.innerHTML = '<i class="fas fa-times-circle"></i> 同步失败';
                    break;
                case 'outdated':
                    statusElement.classList.add('status-outdated');
                    statusElement.innerHTML = '<i class="fas fa-exclamation-circle"></i> 需要更新';
                    break;
            }
            
            // 更新同步时间
            const timeElement = targetCard.querySelector('.sync-time');
            const now = new Date();
            const formattedDate = `${now.getFullYear()}-${padZero(now.getMonth() + 1)}-${padZero(now.getDate())} ${padZero(now.getHours())}:${padZero(now.getMinutes())}`;
            timeElement.textContent = formattedDate;
        }
        
        // 数字补零
        function padZero(num) {
            return num < 10 ? '0' + num : num;
        }
        
        // 显示模态框
        function showModal(modalId) {
            const modal = document.getElementById(modalId);
            if (modal) {
                modal.style.display = 'flex';
                document.body.style.overflow = 'hidden'; // 防止背景滚动
            }
        }
        
        // 关闭模态框
        function closeModal(modalId) {
            const modal = document.getElementById(modalId);
            if (modal) {
                modal.style.display = 'none';
                document.body.style.overflow = ''; // 恢复背景滚动
            }
        }

        // 初始化分布图
        function initDistributionChart() {
            const chart = echarts.init(document.getElementById('distributionChart'));
            
            const option = {
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b}: {c} ({d}%)'
                },
                legend: {
                    orient: 'vertical',
                    right: 10,
                    top: 'center'
                },
                series: [
                    {
                        name: '数据分布',
                        type: 'pie',
                        radius: ['40%', '70%'],
                        avoidLabelOverlap: false,
                        itemStyle: {
                            borderRadius: 10,
                            borderColor: '#fff',
                            borderWidth: 2
                        },
                        label: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: '16',
                                fontWeight: 'bold'
                            }
                        },
                        labelLine: {
                            show: false
                        },
                        data: [
                            { value: 15642, name: '住建局', itemStyle: { color: '#4caf50' } },
                            { value: 12847, name: '供热系统', itemStyle: { color: '#ff9800' } },
                            { value: 13256, name: '燃气系统', itemStyle: { color: '#2196f3' } }
                        ]
                    }
                ]
            };
            
            chart.setOption(option);
            
            // 响应窗口大小变化
            window.addEventListener('resize', () => {
                chart.resize();
            });
        }
        
        // 刷新分布图数据
        function refreshDistribution() {
            // 实际项目中应该从后端获取最新数据
            // 这里仅作示例
            const chart = echarts.getInstanceByDom(document.getElementById('distributionChart'));
            if (chart) {
                chart.showLoading();
                setTimeout(() => {
                    chart.hideLoading();
                    // 模拟数据更新
                    chart.setOption({
                        series: [{
                            data: [
                                { value: 15642 + Math.random() * 100, name: '住建局', itemStyle: { color: '#4caf50' } },
                                { value: 12847 + Math.random() * 100, name: '供热系统', itemStyle: { color: '#ff9800' } },
                                { value: 13256 + Math.random() * 100, name: '燃气系统', itemStyle: { color: '#2196f3' } }
                            ]
                        }]
                    });
                }, 1000);
            }
        }

        // 初始化标准化进度图
        function initStandardizationChart() {
            const chart = echarts.init(document.getElementById('standardizationChart'));
            
            const option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                legend: {
                    data: ['已标准化', '待标准化'],
                    bottom: 0
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '15%',
                    top: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'value',
                    max: 100,
                    axisLabel: {
                        formatter: '{value}%'
                    }
                },
                yAxis: {
                    type: 'category',
                    data: ['住建局', '供热系统', '燃气系统']
                },
                series: [
                    {
                        name: '已标准化',
                        type: 'bar',
                        stack: 'total',
                        label: {
                            show: true,
                            formatter: '{c}%'
                        },
                        data: [65.5, 70.2, 64.2],
                        itemStyle: {
                            color: '#4caf50'
                        }
                    },
                    {
                        name: '待标准化',
                        type: 'bar',
                        stack: 'total',
                        label: {
                            show: true,
                            formatter: '{c}%'
                        },
                        data: [34.5, 29.8, 35.8],
                        itemStyle: {
                            color: '#ff9800'
                        }
                    }
                ]
            };
            
            chart.setOption(option);
            window.addEventListener('resize', () => chart.resize());
        }
    </script>
</body>
</html> 